<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>百度地图测试</title>
    <style type="text/css">
      html {
        height: 100%;
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      #map_container {
        height: 600px;
        width: 800px;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
    <script src="https://api.map.baidu.com/getscript?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="http://mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.105/dist/mapvgl.threelayers.min.js"></script>
  </head>

  <body>
    <div id="map_container"></div>
    <script>
      var map = initBMap();
      var data = initData();
      setData(data, map);

      // 1. 初始化 地图
      function initBMap() {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName("郑州");
        // 引入的 common 中的工具方法
        var bmapgl = initMap({
          tilt: 30,
          center: [cityCenter.lng, cityCenter.lat],
          zoom: 7,
          style: snowStyle,
        });
        return bmapgl;
      }

      // 准备数据源
      function initData() {
        var data = [];
        // 生成 贝塞尔曲线坐标集
        //1. 实例化贝塞尔曲线对象
        var curve = new mapvgl.BezierCurve();
        //2. 设置起点和终点坐标
        var start = new mapv.utilCityCenter.getCenterByCityName("上海");
        var end = new mapv.utilCityCenter.getCenterByCityName("北京");
        curve.setOptions({
          start: [start.lng, start.lat],
          end: [end.lng, end.lat],
        });
        //3. 生成贝塞尔曲线坐标集
        var curveData = curve.getPoints();
        data.push({
          geometry: {
            type: "LineString",
            coordinates: curveData,
          },
        });
        return data;
      }

      // 绘制数据源
      function setData(data, map) {
        // 1. 生成 mapvl 视图 View
        var view = new mapvgl.View({ map: map });
        //2. 初始化 mapvgl 的 飞线 对象
        var flyLayer = new mapvgl.FlyLineLayer({});
        //3. 将 飞线 对象加入 View 中
        view.addLayer(flyLayer);
        //4. 将data 与 飞线 进行绑定
        flyLayer.setData(data);
      }
    </script>
  </body>
</html>
